
<template>
    <div>
        <el-row v-if="array[0].group">
            <el-button-group>
                <el-button v-for="(item, index) in array" :class="item.class || 'suBtn'" :key="item.index" :id="item.classId" :type="item.type" :size="item.size" :icon="item.icon" @click="change(index)" :circle="item.circle" :round="item.round" :plain="item.plain" :disabled="item.disabled" :loading="item.loading">{{item.title}}</el-button>
            </el-button-group>
        </el-row>
        <el-row v-else>
                <el-button v-for="(item, index) in array" :key="item.index" :class="item.class || 'suBtn'" :id="item.classId" :type="item.type" :size="item.size" :icon="item.icon" @click="change(index)" :circle="item.circle" :round="item.round" :plain="item.plain" :disabled="item.disabled" :loading="item.loading">{{item.title}}</el-button>
        </el-row>
    </div>
</template>
<script>
export default {
    props: ["buttonList", "dataId"],
    data() {
        return {
            array: []
        };
    },
    created(){
        var array = JSON.parse(JSON.stringify(this.buttonList));
        this.array = array;
    },
    watch: {
        "dataId": function(val) {
            debugger;
        }
    },
    methods: {
        change(index){
            if (this.array[index].changTitle) {
                this.$layerNotice("提示", "您确定" + name + "吗？", () => {
                    this.$emit("operation", {Index: index, Id: this.dataId});
                    this.array[index].title = this.array[index].title === (this.array[index].isAI ? "AI停用" : "停用") ? (this.array[index].isAI ? "AI启用" : "启用") : (this.array[index].isAI ? "AI停用" : "停用");
                    this.array[index].class = this.array[index].title === (this.array[index].isAI ? "AI启用" : "启用") ? "suBtn" : "erBtn";
                }, null, "warning");
            } else {
                this.$emit("operation", {Index: index, Id: this.dataId});
            }
        },
        changeStatus(index) {
            this.array[index].loading = !this.array[index].loading;
        }
    }
};

// buttonList为传过来的数组
// 如果使用el-group 则在buttonList[0]中加入group：true字段
// title:"primary", //按钮文字
// type:"info", //按钮类型： success , info, warning, danger, text, primary
// plain: true, //是否是朴素按钮 true false
// circle: true,  //是否是圆 true false
// disabled: true, //是否禁用 true false
// round: true, //是否是圆角 true false
// icon: "el-icon-share",//按钮图标： el-icon-delete el-icon-edit el-icon-share el-icon-upload el-icon--right
// size: "small", //按钮大小：small medium mini
// loading: true, // 是否显示加载状态
// 父组件ref绑定子组件的changeStatus方法，当点击按钮，进行截留，防止重复点击
</script>
